<template>
    <div class="container">
        <el-page-header content="出库销售汇总"></el-page-header>
        <div class="e-m-t-45 e-m-b-45">
            <el-radio-group v-model="dataType">
                <el-radio-button label="0">收入支出汇总图</el-radio-button>
                <el-radio-button label="1">入库支出</el-radio-button>
                <el-radio-button label="2">出库销售汇总</el-radio-button>
                <el-radio-button label="3">提现金额情况汇总</el-radio-button>
                <el-radio-button label="4">推广支出情况</el-radio-button>
            </el-radio-group>
            <div>
                <el-radio-group v-model="product" class="e-m-t-20" size="mini">
                    <el-radio-button label="0">查看站点出库情况</el-radio-button>
                    <el-radio-button label="1">查看出库差额情况</el-radio-button>
                </el-radio-group>
            </div>
        </div>
        <div class="">
            <el-form :inline="true" :model="formInline" class="demo-form-inline xuan-box">
                <!-- <el-form-item label="切换站点">
                    <el-select v-model="stroeid" placeholder="选择站点">
                        <el-option v-for="item in stroelist" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="选择出库时间">
                    <el-date-picker @change="time" :clearable="false" value-format="yyyy-MM-dd" v-model="value1"
                        type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getlist()">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="downloadwithdrawa()" plain><i class="iconfont icon-excel"></i>导出Excel</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="flex align-items-center">
            <h4 class="e-flex-1">查询结果</h4>
            <div>
                <!-- <el-radio-group v-model="examineState" @input="getlist">
                    <el-radio :label="1">出库（包含已审和未审数据）</el-radio>
                    <el-radio :label="2">已审出库数据</el-radio>
                    <el-radio :label="3">未审出库数据</el-radio>
                </el-radio-group> -->
            </div>
        </div>
        <div>
            <el-table ref="multipleTable" tooltip-effect="dark" :data="tableData" @selection-change="handleSelectionChange"
                show-summary :summary-method="getSummaries" :span-method="objectSpanMethod" stripe border
                style="width: 100%; margin-top: 20px">
                <el-table-column prop="large" label="类型">
                </el-table-column>
                <el-table-column prop="name" label="小类">
                </el-table-column>
                <el-table-column prop="deliver" label="出库数量">
                    <template slot-scope="scope">
                        <span>{{ scope.row.deliver }}{{ scope.row.isweighing ? 'KG' : '件' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="amount" label="出库金额（元）">
                </el-table-column>
                <el-table-column prop="totalDeliver" label="类型出库总数量">
                    <template slot-scope="scope">
                        <span>{{ scope.row.totalDeliver }}{{ scope.row.isweighing ? 'KG' : '件' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="totalAmount" label="类型出库金额（元）">
                </el-table-column>
                <el-table-column prop="pack" label="核算数量">
                    <template slot-scope="scope">
                        <span>{{ scope.row.pack }}{{ scope.row.isweighing ? 'KG' : '件' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="packAmount" label="核算金额（元）"></el-table-column>
                <el-table-column prop="totalPack" label="类型核算总数量">
                    <template slot-scope="scope">
                        <span>{{ scope.row.totalPack }}{{ scope.row.isweighing ? 'KG' : '件' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="totalPackAmount" label="类型核算金额（元）">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
  
<script>
export default {
    layout: 'admin',
    head() {
        return {
            title: '出库销售汇总' ,
        }
    },
    components: {},
    props: {},
    data() {
        return {
            timeType: 0,//时间类型
            loading: true,
            value1: "",//下单时间
            startdate: "",//下单初始
            enddate: "",//下单结束
            dataType: 2,
            formInline: {
                user: '',
                region: ''
            },
            tableData: [],
            multipleSelection: [],
            amount: "",
            packAmount: "",
            deliver: 0,
            stroelist: "",//站点数组
            stroeid: 0,//站点id
            piece: 0,
            sell: 0,
            sellpiece: 0,
            examineState: 1,
            product: 1,
        };
    },
    watch: {
        dataType(val) {
            console.log(val)
            if (val == 0) {
                this.$router.push({
                    path: '/finance/statistics'
                })
            } else if (val == 1) {
                this.$router.push({
                    path: '/finance/receipt/receipt'
                })
            } else if (val == 2) {
                this.$router.push({
                    path: '/finance/receipt/outbound'
                })
            } else if (val == 3) {
                this.$router.push({
                    path: '/finance/receipt/cash'
                })
            } else if (val == 4) {
                this.$router.push({
                    path: '/finance/receipt/promotion'
                })
            }
        },
        product(val) {
            console.log(val)
            if (val == 0) {
                this.$router.push({
                    path: '/finance/receipt/outbound'
                })
            } else if (val == 1) {
                this.$router.push({
                    path: '/finance/receipt/outboundDifference'
                })
            }
        }
    },
    computed: {},
    methods: {
        downloadwithdrawa() {
            this.$axios.post('/Admin/Statistics/DeliverDifferenceDownload', {
                "start": this.startdate,
                "end": this.enddate,
                // "storeId": this.stroeid,
                // "packStationId": 0,
                "timeType": this.timeType,
                // "examineState": this.examineState
            }, {
                responseType: 'blob'
            }).then(res => {
                console.log(res)
                let content = res;
                let fileName = '出库汇总金额.xlsx'
                this.utils.saveAndExport(content, fileName)
            })
        },
        time(e) {
            console.log(e)
            this.startdate = e[0]
            this.enddate = e[1]
            this.timeType = 9
        },
        //站点数组
        getstroelist() {
            this.$axios.post('/select/storelist', {
                "pageIndex": 1,
                "pageSize": 999,
                "all": true,
            }).then(res => {
                console.log(res)
                this.stroelist = res.rows
                this.stroelist.unshift({
                    name: '全部',
                    id: 0
                })
            })
        },
        //合并最后一个合计
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计';
                    return;
                }
                const values = data.map(item => Number(item[column.property]));

                // console.log(this.tableData)
                if (!values.every(value => isNaN(value))) {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                    sums[index] += '';
                } else {
                    sums[index] = '';
                }

                if (column.label == '小类') {
                    sums[index] = '/'
                }

                if (column.label == '出库数量') {
                    sums[index] ='/'
                }
                if (column.label == '类型出库总数量') {
                    let weight = 0
                    let num = 0
                    data.forEach((item)=>{
                        if(item.isweighing == true){
                            weight += item.deliver
                        }else{
                            num += item.deliver
                        }
                    })
                    sums[index] = weight + 'kg' + '  /  ' + num + '件'
                }
                if (column.label == '出库金额（元）') {
                    sums[index] = '/'
                }
                if (column.label == '类型出库金额（元）') {
                    sums[index] = this.amount
                }

                if (column.label == '核算数量') {
                    sums[index] = '/'
                }
                if (column.label == '类型核算总数量') {
                    let weight = 0
                    let num = 0
                    data.forEach((item)=>{
                        if(item.isweighing == true){
                            weight += item.pack
                        }else{
                            num += item.pack
                        }
                    })
                    sums[index] = weight + 'kg' + '  /  ' + num + '件'
                }
                if (column.label == '核算金额（元）') {
                    sums[index] = '/'
                }
                if (column.label == '类型核算金额（元）') {
                    sums[index] = this.packAmount
                }
            });

            return sums;
        },
        //请求列表
        getlist() {
            this.tableData = []
            this.$axios.post('/Admin/Statistics/DeliverDifference', {
                "start": this.startdate,
                "end": this.enddate,
                // "storeId": this.stroeid,
                // "packStationId": 0,
                "timeType": this.timeType,
                // "examineState": this.examineState
            }).then(res => {
                console.log(res)
                this.amount = res.amount
                this.packAmount = res.packamount
                // this.deliver = res.deliver
                // this.sell = res.sell
               
                res.largetype.forEach((item, index) => {
                    // console.log(item,"==>item", index ,'===>index')
                    item.product.forEach((i, x) => {
                        let obj = {}
                        obj.id = i.id
                        obj.name = i.name
                        obj.path = i.path
                        obj.sort = i.sort
                        obj.deliver = i.deliver
                        obj.amount = i.amount
                        obj.large = item.names
                        obj.bigid = item.id
                        obj.isweighing = item.isweighing
                        obj.totalAmount = item.amount
                        obj.totalDeliver = item.deliver
                        obj.pack = i.pack
                        obj.packAmount = i.packamount
                        obj.totalPack = item.pack
                        obj.totalPackAmount = item.packamount
                        this.tableData.push(obj)
                    })
                    this.loading = false
                })
                // console.log(this.tableData, '====.daat')
                this.piece = 0
                this.sellpiece = 0
                this.deliver = 0
                this.sell = 0
                this.tableData.forEach(item => {
                    // console.log(item, 'item==>')
                    // this.deliver += item.deliver
                    if (item.isweighing) {
                        this.deliver += item.deliver
                        this.sell += item.sell
                    } else {
                        this.piece += item.deliver
                        this.sellpiece += item.sell
                    }
                })
            })
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }

        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            // console.log(this.multipleSelection)
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            // console.log(row, column, rowIndex, columnIndex,'objectSpanMethod')

            let mergeLength = [0,4,5,8,9];//需要进行横纵合并的列,0开始
            
            for (let j = 0; j < mergeLength.length; j++) {

                if (columnIndex == mergeLength[j]) {
                    let finArray = [1, 1];
                    // 处理行数据
                    let cgname = "bigid" //合并单元格的主键依据，一般为第一列的值
                    if (rowIndex === 0 || row[cgname] !== this.tableData[rowIndex - 1][cgname]) {
                        let rowspan = 1;
                        //计算需要进行合并操作的行
                        for (let i = 0; i < this.tableData.length - 1; i++) {
                            // 只合并连续的
                            if (this.tableData[i][cgname] === row[cgname] && this.tableData[i + 1][cgname] === row[cgname]) {
                                rowspan++;
                            }
                        }
                        finArray[0] = rowspan;
                    } else {
                        finArray[0] = 0;
                    }
                    return finArray
                }
            }
        }
    },
    mounted() {
        this.getlist()
        this.getstroelist()

    }
};
</script>
<style lang="scss" scoped>
.xuan-box {
    display: flex;
    justify-content: flex-end;

}
</style>